<ion-header>
    <ion-navbar>
        <ion-title>
            <span class="custom-font-size-t">Calculadora</span>
        </ion-title>
        <ion-buttons end>
            <button ion-button (click)="closeModal()">
                <span class="custom-font-size-t">Atrás</span>
            </button>
        </ion-buttons>
    </ion-navbar>
</ion-header>

<ion-content>
    <ion-grid>
        <ion-row>
            <ion-col size="12" color="primary">
                <ion-label class="memory" *ngIf="(memory !== 0)">
                    {{ memory | number : '.0-8' : 'es' }} {{ operator }}
                </ion-label>
                <ion-label class="memory" *ngIf="(memory === 0)">
                    0
                </ion-label>
            </ion-col>
        </ion-row>
        <ion-row>
            <ion-col size="12" color="primary">
                <ion-label class="display">
                    {{ display | number : '.0-8' : 'es' }}
                </ion-label>
            </ion-col>
        </ion-row>

        <ion-row>
            <ion-col col-3>
                <button ion-button large color="danger" (click)="reset()"> AC </button>
            </ion-col>
            <ion-col col-3>
                <button ion-button large color="dark" (click)="resetLastNumber()"> C </button>
            </ion-col>
            <ion-col col-3>
                <button ion-button large color="dark" (click)="clickBackspace()"><ion-icon size="large" name="backspace"></ion-icon></button>
            </ion-col>
            <ion-col col-3>
                <button ion-button large color="dark" (click)="clickOperator('/')"> / </button>
            </ion-col>
        </ion-row>

        <ion-row>
            <ion-col col-3>
                <button ion-button large (click)="clickNumber(7)"> 7 </button>
            </ion-col>
            <ion-col col-3>
                <button ion-button large (click)="clickNumber(8)"> 8 </button>
            </ion-col>
            <ion-col col-3>
                <button ion-button large (click)="clickNumber(9)"> 9 </button>
            </ion-col>
            <ion-col col-3>
                <button ion-button large color="dark" (click)="clickOperator('*')"><ion-icon size="large" name="close"></ion-icon></button>
            </ion-col>
        </ion-row>

        <ion-row>
            <ion-col col-3>
                <button ion-button large (click)="clickNumber(4)"> 4 </button>
            </ion-col>
            <ion-col col-3>
                <button ion-button large (click)="clickNumber(5)"> 5 </button>
            </ion-col>
            <ion-col col-3>
                <button ion-button large (click)="clickNumber(6)"> 6 </button>
            </ion-col>
            <ion-col col-3>
                <button ion-button large color="dark" (click)="clickOperator('-')"><ion-icon size="large" name="remove"></ion-icon></button>
            </ion-col>
        </ion-row>

        <ion-row>
            <ion-col col-3>
                <button ion-button large (click)="clickNumber(1)"> 1 </button>
            </ion-col>
            <ion-col col-3>
                <button ion-button large (click)="clickNumber(2)"> 2 </button>
            </ion-col>
            <ion-col col-3>
                <button ion-button large (click)="clickNumber(3)"> 3 </button>
            </ion-col>
            <ion-col col-3>
                <button ion-button large color="dark" (click)="clickOperator('+')"><ion-icon size="large" name="add"></ion-icon></button>
            </ion-col>
        </ion-row>

        <ion-row>
            <ion-col col-3>
                <button ion-button large (click)="changeSign('+/-')"> +/- </button>
            </ion-col>
            <ion-col col-3>
                <button ion-button large (click)="clickNumber(0)"> 0 </button>
            </ion-col>
            <ion-col col-3>
                <button ion-button large (click)="setDecimal()"> . </button>
            </ion-col>
            <ion-col col-3>
                <button ion-button large color="danger" (click)="calculate()"> = </button>
            </ion-col>
        </ion-row>
    </ion-grid>
</ion-content>

<ion-footer>
    <ion-grid>
        <ion-row>
            <ion-col col-3>
            </ion-col>
            <ion-col col-6>
                <button ion-button color="secondary" (click)="confirmModal()"> Copiar resultado </button>
            </ion-col>
            <ion-col col-3>
            </ion-col>
        </ion-row>
    </ion-grid>
</ion-footer>
